<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="app">
      <button id="btn">点击按钮，插入100个列表项</button>
      <ul>
        <li>我是列表项1</li>
      </ul>
    </div>
    <script>
      const btn = document.getElementById("btn");
      const ul = document.querySelector("ul");
      btn.addEventListener("click", () => {
        // 创建文档碎片
        // DocumentFragment  是一个轻量级的DOM节点，
        // 可以用来临时存储多个元素，最后一次性插入到DOM中，减少重绘和重排的次数。
        const fragment = document.createDocumentFragment();

        for (let i = 2; i <= 100; i++) {
          const li = document.createElement("li");
          li.textContent = `我是列表项${i}`;
          fragment.appendChild(li)
        }
        ul.appendChild(fragment);
      });
    </script>
  </body>
</html>
